<template>
    <el-row class="home-footer-wrapper my-home-div">
        <el-col :span="24">
            <div class="home-footer-content">
                <div class="footer-content-base">
                    <!-- 双行标题 -->
                    <div class="footer-title-group">
                        <div class="footer-main-title">
                            码客行线上线下公益答疑学校
                        </div>
                        <div class="footer-sub-title">
                            <i class="icon icon-ic_fluent_people_team_28_filled"></i>
                            <span>码客行赋能学校</span>
                        </div>
                    </div>
                    <!-- 联系信息 -->
                    <div class="footer-contact-sections">
                        <div class="footer-contact-column">
                            <div class="footer-contact-item">
                                <span class="footer-campus">一树编程明德校区、高新校区</span>
                                <el-link href="tel:18686539946" :underline="false"
                                    class="footer-tel">18686539946</el-link>
                            </div>
                            <div class="footer-contact-item">
                                <span class="footer-campus">东跃教育易编程</span>
                                <el-link href="tel:13578788249" :underline="false"
                                    class="footer-tel">13578788249</el-link>
                            </div>
                            <div class="footer-contact-item">
                                <span class="footer-campus">德育未来编程学校</span>
                                <el-link href="tel:17386860361" :underline="false"
                                    class="footer-tel">17386860361</el-link>
                            </div>
                            <div class="footer-contact-item">
                                <span class="footer-campus">东丰县AI智创客少儿编程培训中心</span>
                                <el-link href="tel:17386860361" :underline="false"
                                    class="footer-tel">15143440764</el-link>
                            </div>
                        </div>

                        <div class="footer-contact-column">
                            <div class="footer-contact-item">
                                <span class="footer-campus">麦卡麦可建构成长中心</span>
                                <el-link href="tel:13604432211" :underline="false"
                                    class="footer-tel">13604432211</el-link>
                            </div>
                            <div class="footer-contact-item">
                                <span class="footer-campus">通化嘉宝创客培训学校</span>
                                <el-link href="tel:18626570468" :underline="false"
                                    class="footer-tel">18626570468</el-link>
                            </div>
                            <div class="footer-contact-item">
                                <span class="footer-campus">长春点通编程学校</span>
                                <el-link href="tel:13384491133" :underline="false"
                                    class="footer-tel">13384491133</el-link>
                            </div>
                        </div>
                    </div>

                    <!-- 备案信息 -->
                    <div class="footer-bottom-base">
                        <div class="footer-icp">吉ICP备17005743号-2</div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<style scoped>
/* PC端样式 */
@media (min-width: 769px) {
    .home-footer-content {
        margin: 0 40px;
        padding: 20px 0 10px;
    }

    .footer-bottom-base {
        padding: 16px 0;
    }
}

/* HomeFooter 特有样式 - 只覆盖颜色 */
.footer-title-group {
    border-bottom-color: var(--color-cheng) !important;
}

.footer-sub-title .icon {
    color: var(--color-cheng) !important;
}

.footer-main-title {
    color: var(--el-text-color-primary) !important;
}

.footer-sub-title {
    color: var(--el-text-color-primary) !important;
}

.footer-contact-column {
    border-left-color: var(--el-border-color-lighter) !important;
}

.footer-contact-item {
    border-bottom-color: var(--el-border-color-light) !important;
}

.footer-campus {
    color: var(--el-text-color-regular) !important;
}

.footer-tel {
    color: var(--color-cheng) !important;
}

.footer-tel:hover {
    color: var(--color-cheng-dark) !important;
}

.footer-bottom-base {
    border-top: 1px solid var(--el-border-color-light) !important;
    color: var(--el-text-color-secondary) !important;
}

.footer-icp {
    color: var(--el-text-color-placeholder) !important;
}
</style>